<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 文档类型声明，告诉浏览器使用HTML5标准 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为UTF-8，支持中文显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置，确保页面在移动设备上正确显示 -->
    <title>华能集团供应链智慧中枢</title>
    <!-- 页面标题，显示在浏览器标签页上 -->
    <style>
        /* === CSS全局样式设置 === */

        /* 通用选择器：重置所有元素的内外边距和盒模型 */
        * {
            margin: 0;                    /* 清除所有元素的外边距 */
            padding: 0;                   /* 清除所有元素的内边距 */
            box-sizing: border-box;       /* 设置盒模型为border-box，便于尺寸计算 */
            font-family: "Microsoft YaHei", sans-serif; /* 设置默认字体为微软雅黑 */
        }

        /* 页面主体样式 */
        body {
            background-color: #0f1c3c;    /* 设置深蓝色背景 */
            color: #e0e0e0;               /* 设置文字颜色为浅灰色 */
            min-height: 100vh;            /* 设置最小高度为视口高度 */
            background-image: linear-gradient(to bottom, #0f1c3c, #1a2d5a); /* 添加渐变背景 */
        }

        /* 头部区域样式 */
        header {
            background-color: rgba(16, 30, 60, 0.8); /* 半透明深蓝色背景 */
            padding: 20px;                /* 内边距20像素 */
            text-align: center;           /* 文本居中对齐 */
            border-bottom: 2px solid #2a4a7c; /* 底部边框 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
        }

        /* 主标题样式 */
        h1 {
            color: #4fc3f7;               /* 科技蓝色文字 */
            font-size: 2.2rem;            /* 字体大小2.2rem */
            margin-bottom: 15px;          /* 底部外边距15像素 */
            text-shadow: 0 0 10px rgba(79, 195, 247, 0.5); /* 文字发光效果 */
        }

        /* 时间显示区域样式 */
        .showTime {
            font-size: 1.2rem;            /* 字体大小1.2rem */
            color: #81d4fa;               /* 浅蓝色文字 */
            margin-bottom: 20px;          /* 底部外边距20像素 */
        }

        /* 导航容器样式 */
        .nav-container {
            display: flex;                /* 使用flex布局 */
            justify-content: center;      /* 水平居中对齐 */
            flex-wrap: wrap;              /* 允许换行 */
            gap: 12px;                    /* 子元素间距12像素 */
            margin-top: 15px;             /* 顶部外边距15像素 */
            padding: 0 20px;              /* 左右内边距20像素 */
        }

        /* 导航项基础样式 */
        .nav-item {
            background-color: rgba(30, 60, 114, 0.7); /* 半透明背景色 */
            padding: 10px 18px;           /* 内边距：上下10px，左右18px */
            border-radius: 6px;           /* 圆角边框，半径6像素 */
            cursor: pointer;              /* 鼠标指针变为手型 */
            transition: all 0.3s ease;    /* 所有属性过渡动画，时长0.3秒 */
            border: 1px solid #3a5f9a;    /* 边框样式 */
            color: #bbdefb;               /* 文字颜色 */
            font-weight: 500;             /* 字体粗细 */
        }

        /* 导航项悬停效果 */
        .nav-item:hover {
            background-color: rgba(56, 107, 201, 0.8); /* 悬停时背景色变化 */
            transform: translateY(-3px);  /* 向上移动3像素 */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        }

        /* 激活状态的导航项样式 */
        .nav-item.active {
            background-color: #1976d2;    /* 激活状态背景色 */
            color: white;                 /* 激活状态文字颜色 */
            box-shadow: 0 0 15px rgba(25, 118, 210, 0.7); /* 激活状态发光效果 */
        }

        /* === 内容区域样式 === */

        /* 内容区域容器 */
        .content-container {
            max-width: 1200px;            /* 最大宽度1200像素 */
            margin: 30px auto;            /* 上下外边距30px，左右自动（居中） */
            padding: 0 20px;              /* 左右内边距20像素 */
            position: relative;           /* 相对定位，作为子元素定位的参照 */
            min-height: 600px;            /* 最小高度600像素 */
        }

        /* 内容区块基础样式 */
        .content-section {
            background-color: rgba(22, 40, 75, 0.7); /* 半透明背景色 */
            border-radius: 10px;          /* 圆角边框，半径10像素 */
            padding: 25px;                /* 内边距25像素 */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* 阴影效果 */
            border: 1px solid #2a4a7c;    /* 边框样式 */
            min-height: 500px;            /* 最小高度500像素 */
            opacity: 0;                   /* 初始透明度为0（完全透明） */
            position: absolute;           /* 绝对定位 */
            top: 0;                       /* 顶部对齐 */
            left: 0;                      /* 左侧对齐 */
            width: 100%;                  /* 宽度100% */
            height: 0;                    /* 初始高度为0 */
            overflow: hidden;             /* 溢出内容隐藏 */
            transform: none;              /* 无变换效果 */
            transition: opacity 0.3s ease; /* 透明度过渡动画 */
        }

        /* 激活状态的内容区块 */
        .content-section.active {
            opacity: 1;                   /* 完全不透明 */
            height: auto;                 /* 高度自适应内容 */
            position: relative;           /* 相对定位 */
            overflow: visible;            /* 溢出内容可见 */
        }

        /* 区块标题样式 */
        .section-title {
            color: #4fc3f7;               /* 科技蓝色文字 */
            font-size: 1.8rem;            /* 字体大小1.8rem */
            margin-bottom: 20px;          /* 底部外边距20像素 */
            padding-bottom: 10px;         /* 底部内边距10像素 */
            border-bottom: 1px solid #2a4a7c; /* 底部边框 */
        }

        /* 图表容器样式 */
        .chart-container {
            display: grid;                /* 使用grid布局 */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列数 */
            gap: 20px;                    /* 网格间距20像素 */
            margin-top: 20px;             /* 顶部外边距20像素 */
        }

        /* 单个图表样式 */
        .chart {
            background-color: rgba(30, 60, 114, 0.5); /* 半透明背景色 */
            border-radius: 8px;           /* 圆角边框，半径8像素 */
            padding: 15px;                /* 内边距15像素 */
            height: 250px;                /* 固定高度250像素 */
            display: flex;                /* 使用flex布局 */
            flex-direction: column;       /* 垂直排列子元素 */
            justify-content: center;      /* 垂直居中对齐 */
            align-items: center;          /* 水平居中对齐 */
            border: 1px solid #3a5f9a;    /* 边框样式 */
        }

        /* 图表标题样式 */
        .chart-title {
            color: #81d4fa;               /* 浅蓝色文字 */
            margin-bottom: 15px;          /* 底部外边距15像素 */
            font-size: 1.2rem;            /* 字体大小1.2rem */
        }

        /* 图表占位区域样式 */
        .chart-placeholder {
            width: 100%;                  /* 宽度100% */
            height: 180px;                /* 固定高度180像素 */
            background: linear-gradient(45deg, #1a3a6b, #2a4a7c); /* 渐变背景 */
            border-radius: 6px;           /* 圆角边框，半径6像素 */
            display: flex;                /* 使用flex布局 */
            justify-content: center;      /* 水平居中对齐 */
            align-items: center;          /* 垂直居中对齐 */
            color: #bbdefb;               /* 文字颜色 */
            font-size: 1.1rem;            /* 字体大小1.1rem */
        }

        /* 数据卡片网格布局 */
        .data-grid {
            display: grid;                /* 使用grid布局 */
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应列数 */
            gap: 15px;                    /* 网格间距15像素 */
            margin-top: 20px;             /* 顶部外边距20像素 */
        }

        /* 数据卡片样式 */
        .data-card {
            background-color: rgba(30, 60, 114, 0.5); /* 半透明背景色 */
            border-radius: 8px;           /* 圆角边框，半径8像素 */
            padding: 15px;                /* 内边距15像素 */
            border: 1px solid #3a5f9a;    /* 边框样式 */
        }

        /* 数据标题样式 */
        .data-title {
            color: #81d4fa;               /* 浅蓝色文字 */
            font-size: 1rem;              /* 字体大小1rem */
            margin-bottom: 10px;          /* 底部外边距10像素 */
        }

        /* 数据值样式 */
        .data-value {
            color: #4fc3f7;               /* 科技蓝色文字 */
            font-size: 1.8rem;            /* 字体大小1.8rem */
            font-weight: bold;            /* 字体加粗 */
        }

        /* 数据单位样式 */
        .data-unit {
            color: #bbdefb;               /* 浅蓝色文字 */
            font-size: 0.9rem;            /* 字体大小0.9rem */
            margin-left: 5px;             /* 左侧外边距5像素 */
        }

        /* 表格容器样式 */
        .table-container {
            margin-top: 20px;             /* 顶部外边距20像素 */
            overflow-x: auto;             /* 水平方向溢出时显示滚动条 */
        }

        /* 表格基础样式 */
        table {
            width: 100%;                  /* 宽度100% */
            border-collapse: collapse;    /* 边框合并 */
        }

        /* 表头和表格单元格样式 */
        th, td {
            padding: 12px 15px;           /* 内边距：上下12px，左右15px */
            text-align: left;             /* 文本左对齐 */
            border-bottom: 1px solid #2a4a7c; /* 底部边框 */
        }

        /* 表头特殊样式 */
        th {
            background-color: rgba(30, 60, 114, 0.7); /* 半透明背景色 */
            color: #4fc3f7;               /* 科技蓝色文字 */
        }

        /* 表格行悬停效果 */
        tr:hover {
            background-color: rgba(56, 107, 201, 0.2); /* 悬停时背景色变化 */
        }

        /* 页脚样式 */
        footer {
            text-align: center;           /* 文本居中对齐 */
            padding: 20px;                /* 内边距20像素 */
            margin-top: 40px;             /* 顶部外边距40像素 */
            color: #81d4fa;               /* 浅蓝色文字 */
            border-top: 1px solid #2a4a7c; /* 顶部边框 */
        }

        /* === 响应式设计 - 移动设备适配 === */
        @media (max-width: 768px) {
            /* 在屏幕宽度小于768px时应用的样式 */
            .nav-container {
                flex-direction: column;   /* 垂直排列 */
                align-items: center;      /* 居中对齐 */
            }

            .nav-item {
                width: 90%;               /* 宽度90% */
                text-align: center;       /* 文本居中对齐 */
            }

            h1 {
                font-size: 1.8rem;        /* 标题字体大小调整为1.8rem */
            }
        }
    </style>
</head>
<body>
<!-- 头部区域 -->
<header>
    <!-- 主标题 -->
    <h1>华能集团供应链智慧中枢</h1>

    <!-- 时间显示区域 -->
    <div class="showTime">当前时间：2023年11月15日-14时30分25秒</div>

    <!-- 导航栏容器 -->
    <div class="nav-container">
        <!-- 10个导航项，每个都有data-target属性对应内容区块 -->
        <div class="nav-item active" data-target="dashboard">供应链总览</div>
        <div class="nav-item" data-target="procurement">采购管理</div>
        <div class="nav-item" data-target="inventory">库存监控</div>
        <div class="nav-item" data-target="logistics">物流追踪</div>
        <div class="nav-item" data-target="suppliers">供应商分析</div>
        <div class="nav-item" data-target="demand">需求预测</div>
        <div class="nav-item" data-target="performance">绩效评估</div>
        <div class="nav-item" data-target="risk">风险预警</div>
        <div class="nav-item" data-target="cost">成本分析</div>
        <div class="nav-item" data-target="reports">报表中心</div>
    </div>
</header>

<!-- 内容区域容器 -->
<div class="content-container">
    <!-- 供应链总览页面 -->
    <div class="content-section active" id="dashboard">
        <h2 class="section-title">供应链总览</h2>

        <!-- 数据卡片网格 -->
        <div class="data-grid">
            <div class="data-card">
                <div class="data-title">在途物资</div>
                <div class="data-value">1,248<span class="data-unit">吨</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">库存周转率</div>
                <div class="data-value">5.8<span class="data-unit">次/月</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">准时交付率</div>
                <div class="data-value">96.7<span class="data-unit">%</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">采购成本</div>
                <div class="data-value">3.2<span class="data-unit">亿元</span></div>
            </div>
        </div>

        <!-- 图表容器 -->
        <div class="chart-container">
            <div class="chart">
                <div class="chart-title">月度物资流动趋势</div>
                <div class="chart-placeholder">图表区域 - 物资流动趋势图</div>
            </div>
            <div class="chart">
                <div class="chart-title">供应商绩效分布</div>
                <div class="chart-placeholder">图表区域 - 供应商绩效图</div>
            </div>
        </div>
    </div>

    <!-- 采购管理页面 -->
    <div class="content-section" id="procurement">
        <h2 class="section-title">采购管理</h2>

        <!-- 数据卡片网格 -->
        <div class="data-grid">
            <div class="data-card">
                <div class="data-title">本月采购订单</div>
                <div class="data-value">342<span class="data-unit">笔</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">采购金额</div>
                <div class="data-value">1.8<span class="data-unit">亿元</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">平均采购周期</div>
                <div class="data-value">15.2<span class="data-unit">天</span></div>
            </div>
            <div class="data-card">
                <div class="data-title">成本节约率</div>
                <div class="data-value">7.3<span class="data-unit">%</span></div>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="table-container">
            <table>
                <thead>
                <tr>
                    <th>采购项目</th>
                    <th>供应商</th>
                    <th>数量</th>
                    <th>金额(万元)</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>燃煤采购</td>
                    <td>山西能源集团</td>
                    <td>50,000吨</td>
                    <td>3,200</td>
                    <td>已发货</td>
                </tr>
                <tr>
                    <td>设备配件</td>
                    <td>华电机械</td>
                    <td>1,200件</td>
                    <td>850</td>
                    <td>待验收</td>
                </tr>
                <tr>
                    <td>化工原料</td>
                    <td>中化集团</td>
                    <td>800吨</td>
                    <td>1,150</td>
                    <td>运输中</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 库存监控页面 -->
    <div class="content-section" id="inventory">
        <h2 class="section-title">库存监控</h2>

        <!-- 图表容器 -->
        <div class="chart-container">
            <div class="chart">
                <div class="chart-title">库存水平分析</div>
                <div class="chart-placeholder">图表区域 - 库存水平图</div>
            </div>
            <div class="chart">
                <div class="chart-title">库存周转分析</div>
                <div class="chart-placeholder">图表区域 - 库存周转图</div>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="table-container">
            <table>
                <thead>
                <tr>
                    <th>仓库</th>
                    <th>物资类别</th>
                    <th>当前库存</th>
                    <th>安全库存</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>华北中心仓</td>
                    <td>燃煤</td>
                    <td>125,000吨</td>
                    <td>80,000吨</td>
                    <td>正常</td>
                </tr>
                <tr>
                    <td>华东中心仓</td>
                    <td>设备配件</td>
                    <td>8,500件</td>
                    <td>10,000件</td>
                    <td>预警</td>
                </tr>
                <tr>
                    <td>华南中心仓</td>
                    <td>化工原料</td>
                    <td>3,200吨</td>
                    <td>2,500吨</td>
                    <td>正常</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 物流追踪页面 -->
    <div class="content-section" id="logistics">
        <h2 class="section-title">物流追踪</h2>
        <div class="chart-placeholder" style="height: 400px;">物流追踪可视化图表</div>
    </div>

    <!-- 供应商分析页面 -->
    <div class="content-section" id="suppliers">
        <h2 class="section-title">供应商分析</h2>
        <div class="chart-placeholder" style="height: 400px;">供应商分析可视化图表</div>
    </div>

    <!-- 需求预测页面 -->
    <div class="content-section" id="demand">
        <h2 class="section-title">需求预测</h2>
        <div class="chart-placeholder" style="height: 400px;">需求预测可视化图表</div>
    </div>

    <!-- 绩效评估页面 -->
    <div class="content-section" id="performance">
        <h2 class="section-title">绩效评估</h2>
        <div class="chart-placeholder" style="height: 400px;">绩效评估可视化图表</div>
    </div>

    <!-- 风险预警页面 -->
    <div class="content-section" id="risk">
        <h2 class="section-title">风险预警</h2>
        <div class="chart-placeholder" style="height: 400px;">风险预警可视化图表</div>
    </div>

    <!-- 成本分析页面 -->
    <div class="content-section" id="cost">
        <h2 class="section-title">成本分析</h2>
        <div class="chart-placeholder" style="height: 400px;">成本分析可视化图表</div>
    </div>

    <!-- 报表中心页面 -->
    <div class="content-section" id="reports">
        <h2 class="section-title">报表中心</h2>
        <div class="chart-placeholder" style="height: 400px;">报表中心内容</div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    华能集团供应链智慧中枢 © 2023 | 数据更新时间: 2023-11-15 14:30
</footer>

<!-- JavaScript代码 -->
<script>
    // 时间显示功能

    // 定义定时器变量
    var t = null;

    // 启动定时器：1秒后执行time函数
    t = setTimeout(time, 1000);

    // 时间显示主函数
    function time() {
        // 清除之前的定时器，避免重复堆积
        clearTimeout(t);

        // 创建日期对象，获取当前时间
        dt = new Date();

        // 获取时间各部分
        var y = dt.getFullYear();        // 获取完整年份（4位数）
        var mt = dt.getMonth() + 1;      // 获取月份（0-11，需要+1得到实际月份）
        var day = dt.getDate();          // 获取日期（1-31）
        var h = dt.getHours();           // 获取小时（0-23）
        var m = dt.getMinutes();         // 获取分钟（0-59）
        var s = dt.getSeconds();         // 获取秒钟（0-59）

        // 将时间显示在页面上，格式：当前时间：2020年3月17日-0时54分14秒
        document.querySelector(".showTime").innerHTML =
            '当前时间：' + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";

        // 重新设置定时器，实现每秒更新
        t = setTimeout(time, 1000); // 设定定时器，循环运行时间更新
    }

    // 页面切换功能
    // 当DOM内容加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有导航项元素
        const navItems = document.querySelectorAll('.nav-item');
        // 获取所有内容区块元素
        const contentSections = document.querySelectorAll('.content-section');

        // 为每个导航项添加点击事件监听器
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有导航项的活动状态
                navItems.forEach(nav => nav.classList.remove('active'));
                // 移除所有内容区块的活动状态
                contentSections.forEach(section => section.classList.remove('active'));

                // 为当前点击的导航项添加活动状态
                this.classList.add('active');
                // 获取目标内容区块的ID
                const targetId = this.getAttribute('data-target');
                // 显示对应的内容区块
                document.getElementById(targetId).classList.add('active');

                // 新增：切换页面时自动滚动到顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'  // 平滑滚动效果
                });
            });
        });
    });
</script>
</body>
</html>